{% extends "base.html" %}

{% load static %}
{% load django_bootstrap5 %}
{% load django_bootstrap_input_group %}

{% comment %} Meta tags {% endcomment %}
{% block meta_tags %}
    <link href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/ssh.css' %}">
    <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
    <script type="text/javascript" src="{% static 'js/tools/terminal.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/channels.js' %}"></script>
{% endblock %}


{% block content %}
    <main>
        <div id="container">
            <div id="terminal"></div>
        </div>
    </main>

    <div class="modal fade" id="ReconnectModal" tabindex="-1" role="dialog" aria-labelledby="ReconnectModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content bg-dark">
                <div class="modal-body">
                    <button type="button" class="btn-close btn-close-white position-absolute end-0 top-0 m-2"
                            data-bs-dismiss="modal" aria-label="Close"></button>
                    <form method="post">
                        {% csrf_token %}
                        {% bootstrap_grouped_form form %}
                        <div class="d-flex justify-content-center">
                            <button class='btn btn-success rounded-pill px-5 m-1' value='reconnect' name='reconnect'
                                    type='submit'>Reconnect
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        window.addEventListener('load', ()=>{
            const terminalManager = new TerminalManager()
            terminalManager.createTerminal()
            terminalManager.openTerminal(document.getElementById('terminal'))
            const form = document.querySelector('#ReconnectModal form')
            form.addEventListener('submit', function(event) {
                handleFormSubmit(event, terminalManager)
            })
            clearFormOnModalClose('ReconnectModal', 'form');
            const socketManager = new WebSocketManager(`ws://${window.location.host}/ws/session/${window.UserobjectPk}`, terminalManager)
            socketManager.setupTerminalLogic()
        })
    </script>


{% endblock %}




